<template>
    <div class="container">
        <div class="warp">
            <div class="persoinfo">
                <PersonInfo></PersonInfo>
            </div>
            <div class="mainArticle">
                <div v-if="Articlebase">
                    <ArticleInfo :dataBase="Articlebase" @checkdetial="checkdetial"></ArticleInfo>
                </div>
                <div v-else>
                    没有文章
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import PersonInfo from '@/components/Front/PersonInfo/index.vue'
import ArticleInfo from '@/components/Article/index.vue'
import { mapMutations } from 'vuex'
export default {
    components:{
        PersonInfo,
        ArticleInfo
    },
    data(){
        return{
            Database:[],
            Articlebase:[]
        }
    },
    methods:{
        ...mapMutations('editfo',['changeDatas']),
        async getAll(){
            const res = await this.$axios.get("article/SelectByAuthorId")
            this.Articlebase = res
            console.log(res)
        },
        checkdetial(val){
            this.changeDatas(val)
            this.$router.push('/layout/articldetl')
        },
    },
    created(){
        this.getAll()
    }
}
</script>

<style lang="less" scoped>
.container{
    height: 100%;
    width: 100%;
    margin-top: 20px;
    .warp{
        display: flex;
        height: 100%;
        margin: 0 100px;
        justify-content: space-between;
    }
    .persoinfo{
        width:30%;
    }
    .mainArticle{
        margin-top: 10px;
        width: calc(100% - 480px);
    }
}
</style>